<template>
  <div class="markdown-editor">
    <div class="input-fields">
      <input v-model="blogTitle" type="text" placeholder="输入博客标题" class="blog-title-input" />
      <textarea
        v-model="blogDescription"
        placeholder="输入博客简介"
        class="blog-description-input"></textarea>
    </div>
    <div class="editor-container">
      <textarea
        class="markdown-input"
        v-model="markdownContent"
        placeholder="在这里输入Markdown格式的文本..."></textarea>
      <div class="markdown-preview" v-html="renderedContent"></div>
    </div>
    <el-button type="primary" @click="addPost">添加</el-button>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { marked } from 'marked'
import request from '@/utils/request'

const emit = defineEmits(['addBlog'])

const blogTitle = ref('')
const blogDescription = ref('')
const markdownContent = ref('')

const renderedContent = computed(() => {
  return marked(markdownContent.value)
})

// 添加博客
const addPost = () => {
  request
    .post('/blog/addBlog', {
      blogTitle: blogTitle.value,
      blogDesc: blogDescription.value,
      content: markdownContent.value
    })
    .then((res) => {
      if (res.code === '200') {
        ElMessage.success('添加成功')
        blogTitle.value = blogDescription.value = markdownContent.value = ''
        emit('addBlog')
      } else {
        ElMessage.error(res.msg)
      }
    })
    .catch((error) => {
      console.error(error)
    })
}
</script>

<style scoped>
.markdown-editor {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 50px;
  background-color: rgb(102.2, 177.4, 255) !important;
}

.input-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.blog-title-input,
.blog-description-input {
  width: 100%;
  padding: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 16px;
  transition: border-color 0.3s ease;
}

.blog-title-input:focus,
.blog-description-input:focus {
  outline: none;
  border-color: #667eea;
}

.blog-title-input {
  font-size: 20px;
  font-weight: bold;
}

.blog-description-input {
  height: 60px;
  resize: vertical;
}

.editor-container {
  display: flex;
  height: calc(100% - 140px);
  gap: 20px;
}

.markdown-input,
.markdown-preview {
  flex: 1;
  padding: 15px;
  height: 400px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 14px;
  overflow-y: auto;
}

.markdown-input {
  resize: none;
  font-family: monospace;
  background-color: #f7fafc;
}

.markdown-input:focus {
  outline: none;
  border-color: #667eea;
}

.markdown-preview {
  background-color: white;
}

/* 主题颜色样式 */
.markdown-editor {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
  border-radius: 10px;
}

.blog-title-input,
.blog-description-input,
.markdown-input,
.markdown-preview {
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.blog-title-input::placeholder,
.blog-description-input::placeholder,
.markdown-input::placeholder {
  color: #a0aec0;
}

.markdown-preview {
  color: #2d3748;
}
</style>
